<template>
    <pageHeader></pageHeader>
    <h3>用户信息</h3>
    <div v-for="(value,key)  in userInfo" :key="key+'userinfo'" class='list' >
        <div class="item" v-if="key !== 'id'">
            <span>{{ switchKey(key) }}</span> <span v-html="switchVal(key,value)"></span>
        </div>
    </div>
</template>

<script setup>
import pageHeader from '@/components/pageHeader.vue'
import { ref, reactive, onMounted,nextTick } from 'vue'
import { useRoute } from 'vue-router';
import $http, { BaseURL } from '@/api';
import previewImage from '@/assets/js/previewImage'
/**
 * @Author dingxing [2023-03-02 14:09:35]
 * @Description 
 */
const { path, query } = useRoute();
const userInfo = ref({});


onMounted(() => {
    getUserInfo();
});

// 
const switchKey = (key) => {
    switch (key) {
        case 'name': return "昵称：";
        case 'avator': return "头像：";
        case 'age': return "年龄：";
        case 'sex': return "性别：";
        case 'username': return "账号：";
        case 'sign': return "签名：";
    }
};
const switchVal = (key,val) => { 
    switch (key) {
        case 'name': return val;
        case 'avator': return avatorSwitch(val);
        case 'age': return (val?val+'岁':'未知');
        case 'sex': return sexSwich(val);
        case 'username': return val;
        case 'sign': return val;
    }
};
const avatorSwitch = (val) => {
    return `
        <img class='avator' id='avatorImag' src='${BaseURL+val}' />
    `
};
const sexSwich = (val) => {
    if(val == 1) {
        return '男'
    }else if(val== 0){
        return '女'
    }else {
        return '未知'
    }
};

// 给头像绑定事件,预览头像
const bindEvent = () => {
    let img = document.getElementById('avatorImag');
    img.onclick = () => {
        previewImage(img.src);
    }
};

// 获取用户信息
const getUserInfo = () => {
    $http.get('/getUserInfo', {
        userId: query.userId
    }).then((res) => {
        userInfo.value = res || {};
        nextTick(() => {
            bindEvent();
        })
    })
};
</script>

<style lang="less" scoped>
h3 {
    font-size: 0.38rem;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    margin:0 0.6rem;
    border-bottom: solid  rgba(216, 216, 216, 0.661) 1px;
}
.item {
    padding: 0.2rem;
    margin:0 0.6rem;
    width: calc(100% - 1.6rem);
    font-size: 0.28rem;
    display: flex;
    // align-items: center;
    justify-content: flex-start;
    border-bottom: solid  rgba(216, 216, 216, 0.661) 1px;
    >span:first-child {
        width: 1rem;
        display: block;
    }
    >span:last-child {
        width: calc(100% - 1rem);
    }
   :deep(.avator)  {
        width: 1rem;
        height: 1rem;
        object-fit: cover;
    }
}
// .list {
//     border-bottom: solid  rgba(216, 216, 216, 0.661) 1px;
//     &:last-child {
//         border:none;
//     }
// }
</style>